<template>
	<!-- 公共页面 -->
	<view v-if="type == 4" class="code-box flex">
		<!-- 技术推广 -->
		<image :src="CodeUrl" mode="widthFix"></image>
	</view>
	<view v-else-if="type == 5 || type == 6" class="boxAgree flex">
		<!-- 用户协议 隐私政策-->
		<view class="title">《用户服务协议及隐私保护政策》</view>
		<view class="">
			{{AgreementTxt}}
		</view>
	</view>
	<view v-else>
		<view class="box" v-if="list.length">
			<view class="list_item" v-for="(item,index) in list" :key="index"
				@click="toPage(`/pagesA/commonPage/detail?itemObj=${encodeURIComponent(JSON.stringify(item))}`)">
				<view class="item_title">
					{{ item.title }}
				</view>
				<view class="item_bot flex fjb alignC">
					<view class="flex alignC">
						<image class="item_icon" src="/static/logo.png" mode=""></image>
						<text>{{ item.name }}</text>
					</view>
					<view>{{ item.viewNum }}阅读</view>
				</view>
			</view>
		</view>
		<view v-else class="empty_box" style="margin: 200rpx 0 0;">
			<image src="/static/img/empty.png" mode=""></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getUserInfoApi,
		getAccessTokenApi,
		getminiCodeApi,
		getAgreementApi
	} from '../../common/API/userInfoApi.js'
	import{
		addOrUpdateApi,
		addViewByIdApi,
		deleteByIdApi,
		queryListByPageApi
	}from '../../common/API/articleApi.js'
	export default {
		data() {
			return {
				list: [
					// 	{
					// 	title: '关于失眠的4个真相',
					// 	icon: '',
					// 	name: '医事通',
					// 	viewNum: 20
					// }, {
					// 	title: '关于失眠的4个真相',
					// 	icon: '',
					// 	name: '医事通',
					// 	viewNum: 20
					// },
				],
				CodeUrl: '',
				type: '',
				navBarName: '', //标题
				AgreementTxt: '',
				total: 0,
				pageNum: 1
			}
		},
		computed: {
			...mapState('user', ['ylUserInfo'])
		},
		onLoad(options) {
			this.type = options.type
			this.navBarName = options.name

			uni.setNavigationBarTitle({
				title: options.name,
			});
			if (this.type == 4) {
				this.getAccessToken()
				uni.setNavigationBarTitle({
					title: '技术推广',
				});
			} else if (this.type == 5) {
				this.getAgreement()
				uni.setNavigationBarTitle({
					title: '用户协议',
				});
			} else if (this.type == 6) {
				this.getAgreement()
				uni.setNavigationBarTitle({
					title: '隐私政策',
				});
			} else if (this.type == 3) {
				this.queryListByPage()
				uni.setNavigationBarTitle({
					title: '继续教育',
				});
			} else if (this.type == 7) {
				this.queryListByPage()
				uni.setNavigationBarTitle({
					title: '养生知识',
				});
			} else if (this.type == 8) {
				this.queryListByPage()
				uni.setNavigationBarTitle({
					title: '康复知识',
				});
			} else if (this.type == 9) {
				this.queryListByPage()
				uni.setNavigationBarTitle({
					title: '中医知识',
				});
			} else if (this.type == 10) {
				this.queryListByPage()
				uni.setNavigationBarTitle({
					title: '救护知识',
				});
			}
		},
		methods: {
			async getAccessToken() {
				const AccessToken = await getAccessTokenApi()
				this.getminiCode()
			},
			async getminiCode() {
				const res = await getminiCodeApi()
				this.CodeUrl = res
			},
			async getAgreement() {
				const key = uni.getStorageSync('ylProject').miniKey || 'yst'
				const res = await getAgreementApi(key)
				if (!res.status === 200) {
					return uni.$showMsg(res.data)
				}
				this.AgreementTxt = res.data
			},
			async queryListByPage() {
				const res = await queryListByPageApi({
					pageNum: this.pageNum,
					pageSize: 10,
					type: this.type
				})
				console.log('数据',JSON.stringify(res))
				if (res.status == 200) {
					this.list = this.list.concat(res.data.records)
					this.total = res.data.total
				}

			}
		},
		onReachBottom() {
			if (this.list.length >= this.total) {
				uni.$showMsg("没有数据了")
			}
			this.pageNum = this.pageNum + 1
			this.queryListByPage()
		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: 94%;
		margin: 30rpx auto;

		.list_item {
			background: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.item_title {
				font-size: 34rpx;
				margin-bottom: 30rpx;
			}

			.item_bot {
				.item_icon {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.code-box {
		width: 100%;
		height: 100vh;
		justify-content: center;

		image {
			margin-top: 300rpx;
			width: 400rpx;
			height: 400rpx;
		}
	}

	.boxAgree {
		width: 94%;
		margin: 30rpx auto;
		display: flex;
		flex-direction: column;

		.title {
			text-align: center;
			font-size: 34rpx;
			margin-bottom: 30rpx;
		}
	}
</style>